<template>
  <div>
    <el-dialog
        v-model="visible"
        :title="title"
        top="5vh"
        width="800px"
        :close-on-click-modal="false"
        :before-close="handleClose"
        class="group-operate-dialog"
        destroy-on-close
    >
      <div v-loading="loading">
        <div class="font-size-18">
          <span>{{ $t('loc.childrenAccount') }}</span> : {{ children ? children.length : 0 }}
        </div>
        <div class="child-card-list">
          <el-card v-for="child in children" class="child-card" shadow="hover">
            <div class="child-card-body">
              <img :src="child.avatarUrl" style="height: 60px;width: 60px;">
              <div class="child-card-body-right">
                <span class="font-size-16 line-height-18 text-default">{{ child.displayName }}</span>
                <div v-if="!child.isInactive">
                  <el-icon class="pointer" style="margin-right: 5px;" @click="editChildClick(child.id)">
                    <EditPen/>
                  </el-icon>
                  <el-icon class="pointer" style="margin-right: 5px;" @click="removeChildClick(child.id)">
                    <RemoveFilled/>
                  </el-icon>
                  <!--家长列表-->
                  <el-icon class="pointer" @click="openParent">
                    <User/>
                  </el-icon>
                </div>
<!--                 不活跃的-->
                <div v-else>
                  <el-icon class="pointer" style="margin-right: 5px;" @click="editChildClick(child.id)">
                    <EditPen/>
                  </el-icon>
                  <el-icon class="pointer" style="margin-right: 5px;" @click="restoreChildClick(child)">
                    <RefreshLeft />
                  </el-icon>
                  <!--删除-->
                  <el-icon class="pointer" @click="deleteChildClick(child.id)">
                    <Delete/>
                  </el-icon>
                </div>
              </div>
            </div>
          </el-card>
        </div>
        <el-empty class="h-full" v-if="!loading && (!children || children.length === 0)" :image="require(`@/assets/img/common/empty.png`)"/>
      </div>
      <template #footer>
      <span class="dialog-footer">
          <el-button @click="handleClose">{{ $t('loc.close') }}</el-button>
          <el-button type="primary" @click="addChildHandler">
             {{ $t('loc.addChild') }}
          </el-button>
      </span>
      </template>
    </el-dialog>
    <ChildEditDialog
        :child-id="selectedChild"
        v-model:dialogVisible="visibleChildOperateDialog"
        @needReLoadData="needReLoadData"
        :group-id="groupId"
    />
<!--    <InviteParentsDialog-->
<!--        :group-id="groupId"-->
<!--        v-model:dialogVisible="visibleInviteParentsDialog"-->
<!--    />-->
    <invitationParentCodesDialog
        :group-id="groupId"
        v-model:dialogVisible="visibleInviteParentsDialog"
    />
  </div>
</template>

<script>
import {Delete, EditPen, RemoveFilled, User, RefreshLeft} from '@element-plus/icons-vue'
import ChildEditDialog from "@/views/modules/home/child/ChildEditDialog";
import InviteParentsDialog from "@/views/modules/home/parent/InviteParentsDialog";
import invitationParentCodesDialog from "@/views/modules/home/parent/invitationParentCodesDialog";
import ChildApi from "@/api/child";
import { ElNotification } from 'element-plus'
export default {
  name: "ChildListDialog",
  props: ['dialogVisible', 'groupId'],
  components: {
    invitationParentCodesDialog,
    InviteParentsDialog,
    ChildEditDialog,
    Delete,
    EditPen,
    RemoveFilled,
    User,
    RefreshLeft
  },
  data() {
    return {
      loading: false,
      visible: false,
      title: this.$t('loc.childList'),
      children: [],
      visibleGroupIconDropdown: false,
      visibleChildOperateDialog: false,
      visibleInviteParentsDialog: false,
      selectedChild: '',
      needReLoad: false,
    }
  },
  watch: {
    dialogVisible: {
      immediate: true,
      handler(newVal) {
        this.visible = newVal
        if (newVal) {
          this.initData()
        }
      },
    },
  },
  methods: {
    needReLoadData() {
      this.needReLoad = true
      this.initData()
    },
    initData() {
      this.loadChildren(this.groupId)
    },
    handleClose() {
      this.visible = false
      this.$emit('update:dialogVisible', this.visible)
      if (this.needReLoad === true) {
        this.needReLoad = false
        this.$emit('needReLoadData')
      }
    },
    loadChildren(groupId) {
      if (!groupId) {
        return
      }
      this.loading = true
      let params = {
        groupId: groupId,
      }
      ChildApi.getChildren(params).then(res => {
        this.children = res.children
      }).catch(error => {
        this.$message.error(error.response.data.description)
      }).finally(() => {
        this.loading = false
      })
    },
    addChildHandler() {
      this.selectedChild = ''
      this.visibleChildOperateDialog = true
    },
    editChildClick(childId) {
      if (!childId) {
        return
      }
      this.selectedChild = childId
      this.visibleChildOperateDialog = true
    },
    removeChildClick(childId) {
      if (!childId) {
        return
      }
      this.$confirm(this.$t('loc.cgeItv') + ' ' + this.$t('loc.restoreChild'), this.$t('loc.tip'), {
        confirmButtonText: this.$t('loc.confirm'),
        cancelButtonText: this.$t('loc.cancel'),
        type: 'warning'
      }).then(() => {
        ChildApi.inactiveChild(childId).then(res => {
          ElNotification({
            title: this.$t('loc.tip'),
            message: "离校成功，您可以在“离校的班级”中查看或恢复该学生",
            position: 'bottom-right',
          })
          this.needReLoadData()
        }).catch(error => {
          this.$message.error(error.response.data.description)
        })
      }).catch(() => {
      })
    },
    deleteChildClick (childId) {
      if (!childId) {
        return
      }
      this.$confirm('您确定要真正的删除该学生吗？', this.$t('loc.tip'), {
        confirmButtonText: this.$t('loc.confirm'),
        cancelButtonText: this.$t('loc.cancel'),
        type: 'warning'
      }).then(() => {
        ChildApi.deleteChild(childId).then(res => {
          ElNotification({
            title: this.$t('loc.tip'),
            message: this.$t('loc.delSfy'),
            position: 'bottom-right',
          })
          this.needReLoadData()
        }).catch(error => {
          this.$message.error(error.response.data.description)
        })
      }).catch(() => {
      });
    },
    restoreChildClick (child) {
      if (!child || !child.id) {
        return
      }
      this.$confirm(this.$t('loc.areYouSureRe', {childName: child.displayName}), this.$t('loc.tip'), {
        confirmButtonText: this.$t('loc.confirm'),
        cancelButtonText: this.$t('loc.cancel'),
        type: 'info'
      }).then(() => {
        ChildApi.restoreChild(child.id).then(res => {
          ElNotification({
            title: this.$t('loc.tip'),
            message: this.$t('loc.rstSf'),
            position: 'bottom-right',
          })
          this.needReLoadData()
        }).catch(error => {
          this.$message.error(error.response.data.description)
        })
      }).catch(() => {
      });
    },
    openParent() {
      this.visibleInviteParentsDialog = true
    },
  }
}
</script>

<style scoped lang="less">
/deep/ .el-dialog__header {
  border-bottom: 1px solid #e5e5e5;

  .el-dialog__title {
    font-size: 24px;
    color: #58666e;
  }
}

.el-dialog__footer {
  .el-button {
    padding: 20px 15px;
  }
}

.child-card-list {
  display: flex;
  flex-wrap: wrap;
}

.child-card {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 4px;
  margin: 4px;
  min-width: 200px;
  max-width: fit-content;
  height: fit-content;
  color: #58666e;

  /deep/ .el-card__body {
    padding: 5px;
  }

  .child-card-body {
    display: flex;
  }

  .child-card-body-right {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: flex-start;
    margin-left: 15px;
  }
}
</style>